<template>
	<div>
		<ma-body>
			<div slot="header">
				<image src="../../../static/img/isBack.png" mode="aspectFill" style="width: 8.53vw;height: 8.53vw;" @tap="toBack"></image>
				<div class="header-box">
					<div>
						<span v-for="item,index in titleList" class="title"
							:class="{'selectTitle': index == currindex }" @tap="onSelect(index)">{{item}}</span>
					</div>
					<span class="jiu-font28-555" style="color: #A972FF;line-height: 11.73vw;">当前灵石：{{ user.myWallet.signCoins || 0 }}</span>
				</div>
			</div>
			<div slot="content" class="content">
				<swiper style="height: 100%;" :current="currindex" @change="swiperChange">
					<swiper-item>
						<ma-refresh pageName="page0">
							<div>
								<recordCard :item="page0.list"></recordCard>
							</div>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh pageName="page1">
							<recordCard :item="page1.list"></recordCard>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh pageName="page2">
							<recordCard :item="page2.list"></recordCard>
						</ma-refresh>
					</swiper-item>
				</swiper>
			</div>
		</ma-body>
	</div>
</template>

<script>
	import recordCard from '@/subPackB/components/record-card/record-card';
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		components: {
			recordCard
		},
		data() {
			return {
				titleList: ['全部', '收入', '支出'],
				currindex: 0,
				page0: new Refresh(this, {
					apiName: 'getSignCoinsLog',
					apiData: {
						amountDirectio: null
					},
					objectName: 'id'
				}),
				page1: new Refresh(this, {
					apiName: 'getSignCoinsLog',
					apiData: {
						amountDirectio: 1
					},
					objectName: 'id'
				}),
				page2: new Refresh(this, {
					apiName: 'getSignCoinsLog',
					apiData: {
						amountDirectio: '-1'
					},
					objectName: 'id'
				})
			}
		},
		methods:{
			onSelect(e){
				this.currindex = e;
			},
			swiperChange(e) {
				this.currindex = e.detail.current;
			}
		},
		computed: {
			// pageList(){
			// 	const obj = {};
			// 	this.page0.list.forEach(item => {
			// 		const arr = item.createTime.split(' ');
			// 		const time = arr[0].split('-')
			// 		const key = `${time[0]}${time[1]}`
			// 		if(obj[key])obj[key].push(item)
			// 		else obj[key] = [item]
			// 	})
			// 	console.log('25555555555555555555',obj)
			// 	return obj;
			// }
		},
		onLoad(){
			this.page0.onRefresh();
			this.page1.onRefresh();
			this.page2.onRefresh();
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
	}

	.header-box {
		display: flex;
		justify-content: space-between;
		padding: 0vw 5.33vw;
		background-color: #1b1b1b;

		.title {
			font-size: 3.73vw;
			font-weight: 300;
			color: #555555;
			margin-right: 6.4vw;
			line-height: 11.73vw;
			display: inline-block;
		}

		.title:last-child {
			margin-right: 0;
		}

		.selectTitle {
			border-bottom: 2px solid #FFCE80;
			color: #FFCE80;
			font-weight: 500;
		}
	}

	
</style>
